Configuring Tooltips

In this tutorial, we will show how you can style your tooltips, create a fragmented tooltip and set custom content in the tooltip.

Styling tooltips

Tooltip visuals can be customized using css class.

In this example, we show how you can apply a dark theme to your tooltip.

Muze adds a class name to each component in the tooltip for example, the outer box, individual rows, etc.

Styling the outer box of the tooltip using muze-tooltip-box class

.muze-tooltip-box {
  padding: 5px;
  background: #2d2424;
  color: #fff;
  box-shadow: none;
}

Styling the key and value of the tooltips using muze-tooltip-key and muze-tooltip-value class.

.muze-tooltip-value {
  color: #fff;
}

.muze-tooltip-key {
  color: #fff;
}

Changing the highlight style of the hovered item in tooltip using muze-tooltip-selected-item

.muze-tooltip-selected-row {
  background: #615252;
}

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Horsepower"])
  .columns(["Origin"])
  .color("Cylinders")
  .data(data)
  .layers([
    {
      mark: "bar",
      transform: { type: "group" },
    },
  ])
  .title("Grouped bar chart", { position: "bottom", align: "right" })
  .subtitle("Horsepower by Origin coloured by Cylinders", {
    position: "bottom",
    align: "right",
  })
  .mount("#chart");

Creating fully customizable tooltip using html operator

You can also display custom html content in the tooltip using html Operator of muze.

Get the html operator:

const html = muze.Operators.html;

Set the new formatter in tooltip:

canvas.config({
  interaction: {
    tooltip: {
      formatter: (dataStore) => {
        const dm = dataStore.dataModel;
        const data = dm.getData().data;
        return html`<div>${data[0][1]}</div>`;
      },
    },
  },
});

Here dataStore is a wrapper over DataModel instance which is created by Muze. It has some utility functions required by Muze to handle some data operations and formatting data.

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();
const html = muze.Operators.html;
muze
  .canvas()
  .data(data)
  .color("Cylinders")
  .rows(["Horsepower"])
  .columns(["Origin"])
  .config({
    interaction: {
      tooltip: {
        formatter: (dataStore, config) => {
          const dm = dataStore.dataModel;
          const colorAxis = config.context.axes.color[1];
          const tooltipData = dm.getData().data;

          let tooltipContent = "";
          tooltipData.forEach((dataArray, i) => {
            const originVal = dataArray[dm.getFieldIndex("Origin")];
            const hpVal = dataArray[dm.getFieldIndex("Horsepower")];
            const cylVal = dataArray[dm.getFieldIndex("Cylinders")];
            const l = colorAxis.getRawColor(cylVal)[2]; // luminance
            tooltipContent += `
			        ${i ? "" : `<h3 style="background-color:#EAEAEA">Country: ${originVal}</h3>`}
			            <div style="background: ${colorAxis.getColor(cylVal)}; padding: 4px 8px; color: ${l > 0.45 ? "black" : "white"};">
                            <u>${cylVal} Cylinders</u> cars with an average power of <b>${hpVal} HP</b>
			            </div>
			        `;
            tooltipContent += "<br>";
          });
          return html`${tooltipContent}`;
        },
      },
    },
  })
  .mount("#chart");